{{#if template}}
<template>
  <div class="page">
    <el-breadcrumb separator-class="el-icon-arrow-right">

      <el-breadcrumb-item>
        <routerLink to="/contract">合同管理</routerLink>
      </el-breadcrumb-item>
      <el-breadcrumb-item>新增合同</el-breadcrumb-item>
    </el-breadcrumb>

    <div class="main-container">
      <el-card class="box-card" shadow="none">
        <div slot="header" class="clearfix">
          <span>新增合同</span>
        </div>
        <div class="box-card-body">
          <el-form ref="form" :rules="rules" :model="form" label-width="110px" style="width: 1000px">
            <el-row>
              <el-col :span="12">
                <el-form-item label="合同编号" prop="contractNo">
                  <el-input v-model="form.contractNo"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="合同名称" prop="contractName">
                  <el-input v-model="form.contractName"></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="12">
                <el-form-item label="合同类型" prop="contractTpye">
                  <el-select v-model="form.contractTpye" placeholder="请选择合同类型" style="width: 100%">
                    <el-option
                        v-for="item in contractTypeOptions"
                        :key="item.code"
                        :label="item.value"
                        :value="item.code"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="合同期限" prop="dateRange">
                  <el-date-picker
                      v-model="form.dateRange"
                      type="daterange"
                      align="right"
                      unlink-panels
                      range-separator="至"
                      start-placeholder="开始日期"
                      value-format="yyyy-MM-dd"
                      style="width: 100%"
                      end-placeholder="结束日期">
                  </el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="12">
                <el-form-item label="甲方" prop="partyA">
                  <el-input v-model="form.partyA"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="乙方" prop="partyB">
                  <el-input v-model="form.partyB"></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-form-item label="合同描述" prop="remark">
              <el-input type="textarea" v-model="form.remark"></el-input>
            </el-form-item>

            <el-row>
              <el-col :span="12">
                <el-form-item label="合同附件" prop="attachFileContract">
                  <el-upload
                      class="upload-panel"
                      drag
                      accept="application/pdf"
                      :file-list="fileList"
                      :action="uploadFileUrl"
                      :headers="headers"
                      :before-upload="beforeUploadPdf"
                      :on-success="handleUploadSuccess"
                      :on-remove="handleRemoveSuccess"
                      :limit="3"
                      :on-exceed="fileExceed"
                  >
                    <div class="el-upload__text"><b>PDF</b></div>
                    <i class="iconfont icon-shangchuan-copy"></i>
                  </el-upload>
                </el-form-item>
              </el-col>
            </el-row>

            <div class="el-form-command">
              <el-button @click="goBack">返回</el-button>
              <el-button type="primary" @click="submitForm">提交</el-button>
            </div>
          </el-form>
        </div>
      </el-card>
    </div>
  </div>
</template>
{{/if}}

{{#if script}}
<script>
import {URLS} from '@/config/api';
import {contractRule} from '@/utils/rules';
import {getFileUploadUrl, getHeaders} from '@/utils';

const defaultForm = {
  contractNo: null,
  contractName: null,
  contractTpye: null,
  partyA: null,
  partyB: null,
  dateRange: null,
  remark: null,
  attachFileContract: null
};

export default {
  name: '{{ properCase name }}',
  data() {
    return {
      form: Object.assign({}, defaultForm),
      files: [],
      rules: contractRule,
      dialogImageUrl: '',
      dialogVisible: false,
      fileList: [],
      contractTypeOptions: []
    };
  },
  computed: {
    headers() {
      return getHeaders();
    },
    uploadFileUrl() {
      return getFileUploadUrl(URLS.uploadFileUrl('simple'));
    }
  },
  mounted() {
    this.getKeyCode({ids: [624]});
  },
  methods: {
    getKeyCode(ids) {
      this.axios.post(URLS.dictionaryMore, ids).then(res => {
        if (res && res.success) {
          this.contractTypeOptions = res.data[624];
        }
      });
    },
    goBack() {
      this.$router.back();
    },
    beforeUploadPdf(file){
      const isPDF = file.type === 'application/pdf';
      const isLt40M = file.size / 1024 / 1024 < 40;

      if (!isPDF) {
        this.$message.error('上传文档只支持PDF格式!');
      }
      if (!isLt40M) {
        this.$message.error('上传文档大小不能超过 40MB!');
      }
      return isPDF && isLt40M;
    },
    handleUploadSuccess(res, file) {
      if (res && res.success) {
        this.form.attachFileContract = res.data;
        this.fileList.push({
          'name': file.name,
          'url': res.data,
        });
        this.files.push({
          'enclosureUrl': res.data,
          'enclosureName': file.name
        });
      }
    },
    fileExceed() {
      this.$message.error('至多只能上传三个合同附件!');
    },
    handleRemoveSuccess(file, fileList) {
      let url, urlArray = [];
      if (file.hasOwnProperty('url')) {
        url = file.url;
      } else if (file.hasOwnProperty('response') && file.response.hasOwnProperty('data')) {
        url = file.response.data;
      }
      urlArray.push(url);
      this.axios.post(URLS.deleteFileUrl, urlArray).then(res => {
        if (res && res.success) {
          this.form.attachFileContract = '';
          this.files = fileList.map(item => {
            return {
              'enclosureUrl': item.url,
              'enclosureName': item.name
            }
          });
          this.fileList = fileList;
        } else {
          this.$message.error(res.msg || '操作失败。');
        }
      });
    },
    submitForm() {
      const form = this.$refs['form'];
      if (this.form.dateRange && this.form.dateRange.length === 2) {
        this.form.dateStart = this.form.dateRange[0];
        this.form.dateEnd = this.form.dateRange[1];
      }
      form.validate((valid) => {
        if (valid) {
          delete this.form.dateRange;
          let _form = {
            'contract': this.form,
            'files': this.files
          };
          this.axios.post(URLS.contractCreate, _form).then(res => {
            if (res && res.success) {
              this.$router.push({name: 'contract'});
              this.files = [];
            } else {
              this.$message.error(res.msg || '操作失败。');
            }
          });
        } else {
          console.log('提交失败');
          return false;
        }
      });
    }
  }
}
</script>
{{/if}}

{{#if style}}
<style lang="scss" scoped>

</style>
{{/if}}
